/**
 * 自定义事件模板 eventBodyTemplate
 * @param {*} eventRecord
 */

// scheduler  渲染事件内容
export function eventBodyTemplate({ eventRecord }) {
  let innerHTML = ''
  // 是否存在能力描述数据
  const describe = eventRecord.get('describe')
  if (describe) {
    innerHTML = renderDescribeElement(describe)
  }
  /**
   * 当前事件是否填充过数据
   * （工作区中事件是否被拖拽填充过）
   */
  const fillEventRecord = eventRecord.get('fillEventRecord')
  let fillEventHTML = '',
    eventNameClass = 'event-name'
  if (eventRecord.eventStyle === 'lhch' && fillEventRecord) {
    /**
     * 当前模块接入的数据类型
     * 在baseClass\Linteners.js 中添加数据时定义
     */
    const fillEventRecordType = eventRecord.get('customEventType')
    fillEventHTML = renderFillEventRecordElement(fillEventRecord, fillEventRecordType)
    eventNameClass = 'event-chain-name'
  }

  /**
   * 当前是否是链路线
   * 为点自动生成链路线
   */
  const fillEventLink = eventRecord.get('fillEventLink')
  if (eventRecord.eventStyle === 'lhch' && fillEventLink) {
    /**
     * 当前模块接入的数据类型
     * 在baseClass\Linteners.js 中添加数据时定义
     */
    const fillEventRecordType = eventRecord.get('customEventType')
    fillEventHTML = renderFillEventLinkElement(fillEventLink, fillEventRecordType)
    eventNameClass = 'event-chain-name'
  }

  /**
   * 关键点
   * 通信车的开机...
   */
  const keyPoint = eventRecord.get('keyPoint')
  let keyPointHTML = ''
  if (keyPoint) {
    keyPointHTML = renderKeyPointElement(eventRecord, keyPoint)
    eventNameClass = 'event-chain-name'
  }

  return (
    '<div class="b-sch-event-item" ><div class="' +
    eventNameClass +
    '">' +
    eventRecord.name +
    '</div>' +
    innerHTML +
    fillEventHTML +
    keyPointHTML +
    '<div>'
  )
}
export function eventRenderer({ eventRecord, renderData }) {
  return {
    eventRecord,
    renderData
  }
}
/**
 * 添加能力描述数据
 * @param {*} connentData
 * @returns
 */
function renderDescribeElement(connentData) {
  let connentElement = '<div class="describe-container">'
  // const eventStyle = eventRecord.eventStyle
  for (let index = 0; index < connentData.length; index++) {
    const item = connentData[index],
      // 指令背景色
      bgColor = item.eventColor || 'transparent'
    connentElement +=
      '<div class="describe-item" title="' +
      item.name +
      '" style="background-color :' +
      bgColor +
      '">' +
      item.name +
      '</div>'
  }
  connentElement += '</div>'
  return connentElement
}

/**
 * 渲染填充数据的链路
 * @param {*} param0
 * @param {*} fillEventRecordType 链路类型
 * @returns
 */
function renderFillEventRecordElement({ chainData }, fillEventRecordType) {
  let chainHTML = '',
    leftDistance = 100 / (chainData.length + 1)
  for (let index = 0; index < chainData.length; index++) {
    const item = chainData[index]
    chainHTML += `
    <div class="chain-item" style="left:${leftDistance * (index + 1)}%">
      <span class="chain-item-name">${item.name}</span>
      <span class="chain-item-point"></span>
    </div>
    `
  }

  chainHTML += '<div class="chain-item-line chain-item-line-' + fillEventRecordType + '" ></div>'

  return chainHTML
}
/**
 * 渲染填充数据的链路点和增加线
 * @param {*} param0
 * @param {*} fillEventRecordType 链路类型
 * @returns
 */
function renderFillEventLinkElement({ chainData }, fillEventRecordType) {
  let chainHTML = '',
    leftDistance = 100 / (chainData.length + 1)
  for (let index = 0; index < chainData.length; index++) {
    const item = chainData[index]
    chainHTML += `
    <div class="chain-item keypoint-item" style="left:${leftDistance * (index + 1)}%">
      <span class="chain-item-name">${item.name}</span>
      <span class="chain-item-point"></span>
    </div>
    `
  }
  const right = (1 - (leftDistance * chainData.length) / 100) * 100
  chainHTML += `<div style="left:${leftDistance}%;right:${right}%" class="chain-item-line  chain-item-line-${fillEventRecordType}" ></div>`

  return chainHTML
}
/**
 * 渲染关键点
 * @param {*} eventRecord
 * @param {*} keyPointData
 * @returns
 */
function renderKeyPointElement(eventRecord, keyPointData) {
  const START_DATE = +new Date(eventRecord.startDate),
    END_DATE = +new Date(eventRecord.endDate),
    diffScale = END_DATE - START_DATE
  let keyPointElement = ''
  let firsetPointStyle = '',
    lastPointStyle = ''
  for (let index = 0; index < keyPointData.length; index++) {
    const item = keyPointData[index]
    const startDate = +new Date(item.startDate),
      endDate = +new Date(item.endDate)
    let layoutLeft = ((startDate - START_DATE) / diffScale) * 100,
      layoutRight = 100 - ((endDate - START_DATE) / diffScale) * 100
    if (index === 0) firsetPointStyle = layoutLeft
    if (index === keyPointData.length - 1) lastPointStyle = 'right:' + layoutRight + '%'
    keyPointElement +=
      '<div class="chain-item keypoint-item" title="' +
      item.name +
      '" style="left:' +
      layoutLeft +
      '%;right:' +
      layoutRight +
      '%;"><span class="chain-item-name keypoint-name">' +
      item.name +
      '</span><span class="chain-item-point" ></span></div>'
  }
  // 添加连线
  keyPointElement +=
    '<div class="keypoint-line chain-item-line" style="left:' + firsetPointStyle + '%;' + lastPointStyle + '"></div>'
  return keyPointElement
}
